<template>
    <el-dialog :title="dialogProps.title" :visible.sync="dialogProps.visible" width='300px'  append-to-body   :fullscreen = 'Global.currentDevice'>
      		<el-row> 
                    <!--touchstart,touchmove,touchend,touchcancel 这-->
                    <canvas id="canvas" ref="canvasF" width="260" height="150" style="border:1px solid black"
                      @touchstart='touchStart'                
                      @touchmove='touchMove'                
                      @touchend='touchEnd'   
                                   
                      @mousedown="mouseDown"
                      @mousemove="mouseMove"
                      @mouseup="mouseUp"

                    >Canvas画板</canvas>

                    <div  class="dialog-footer  mb28  mt32"  align='center'>
                          <el-button @click="clear">清除</el-button>
                          <el-button type="primary" @click="save">保存</el-button>
                    </div>
          </el-row>
    </el-dialog>
</template>

<script >
//接口 
import { listLabel ,getLabelById} from '@/api/settings/label'


export default {
  name: 'signCanvas',
  data () {
    return {
        url:"",
         //dialogo基本信息  显示隐藏状态  title 
        dialogProps: {
          visible: false,
          action: '',
          title: '电子签名'
        },

        canvas:'',
        points:[],          
        canvasTxt:null,           
        stage_info:[],          
        startX:0,          
        startY:0,          
        moveY:0,          
        moveX:0,          
        endY:0,          
        endX:0,          
        w:null,          
        h:null,          
        isDown:false,

    }
  },
  created(){
    
  },
  methods:{
      save(){
            let canvas=this.$refs.canvasF;
            let data=canvas.toDataURL("image/png");
            // console.log(data)
            this.$emit('save-finished',data)
            this.dialogProps.visible = false
            this.clear()
      },
      clear(){
          let that = this;
          this.canvasTxt.clearRect(0, 0, 300, 600)
      },
      backHome(){
              window.history.back();
      },        
      //电脑设备事件        
      mouseDown(ev){
              ev = ev || event;
              ev.preventDefault();
              console.log(ev);
              if(1){
                  let obj={ 
                     x:ev.offsetX ,
                     y:ev.offsetY,
                  };
                  console.log(obj);
                  this.startX=obj.x;
                  this.startY=obj.y;
                  this.canvasTxt.beginPath();
                  this.canvasTxt.moveTo(this.startX, this.startY);
                  this.canvasTxt.lineTo(obj.x, obj.y);
                  this.canvasTxt.stroke();
                  this.canvasTxt.closePath();
                  this.points.push(obj);
                  this.isDown=true; 
            } 
      },        
      //移动设备事件        
      touchStart(ev){      
          ev = ev || event;         
          ev.preventDefault();  
          if(ev.touches.length == 1) {   
                let obj={     
                    x:ev.targetTouches[0].clientX - this.stage_info.left - 5,     
                    y:ev.targetTouches[0].clientY- this.stage_info.top - 0     
                };         
                this.startX=obj.x;      
                this.startY=obj.y;      
                this.canvasTxt.beginPath();   
                this.canvasTxt.moveTo(this.startX, this.startY);   
                this.canvasTxt.lineTo(obj.x, obj.y);       
                this.canvasTxt.stroke();    
                this.canvasTxt.closePath();   
                this.points.push(obj);      
          }     
      },        
      //电脑设备事件
      mouseMove(ev){       
           ev = ev || event;    
           ev.preventDefault();     
           if(this.isDown){    
                 let obj={         
                   x:ev.offsetX,     
                   y:ev.offsetY    
                 };         
                 this.moveY=obj.y;     
                 this.moveX=obj.x;   
                 this.canvasTxt.beginPath();     
                 this.canvasTxt.moveTo(this.startX, this.startY);   
                 this.canvasTxt.lineTo(obj.x, obj.y);    
                 this.canvasTxt.stroke();       
                 this.canvasTxt.closePath();      
                 this.startY=obj.y;        
                 this.startX=obj.x;       
                 this.points.push(obj);      
            }     
      },        
      //移动设备事件        
      touchMove(ev){
              ev = ev || event;
              ev.preventDefault();
              if(ev.touches.length == 1) {
                  let obj={
                    x:ev.targetTouches[0].clientX - this.stage_info.left - 5,
                    y:ev.targetTouches[0].clientY- this.stage_info.top - 0
                  };
                  this.moveY=obj.y;
                  this.moveX=obj.x;
                  this.canvasTxt.beginPath();
                  this.canvasTxt.moveTo(this.startX, this.startY);
                  this.canvasTxt.lineTo(obj.x, obj.y);
                  this.canvasTxt.stroke();
                  this.canvasTxt.closePath();
                  this.startY=obj.y;
                  this.startX=obj.x; 
                 this.points.push(obj);
              }
       },        
      //电脑设备事件 
      mouseUp(ev){
              ev = ev || event;
              ev.preventDefault();
              if(1){
                let obj={
                  x:ev.offsetX,
                  y:ev.offsetY
                };
                this.canvasTxt.beginPath();
                this.canvasTxt.moveTo(this.startX, this.startY);
                this.canvasTxt.lineTo(obj.x, obj.y);
                this.canvasTxt.stroke();
                this.canvasTxt.closePath(); 
                this.points.push(obj);
                this.points.push({x:-1,y:-1});
                this.isDown=false;
              }
      },        
      //移动设备事件
      touchEnd(ev){
              ev = ev || event;
              ev.preventDefault();
              console.log(ev);
              if(ev.touches.length == 1) {
                let obj={
                  x:ev.targetTouches[0].clientX - this.stage_info.left - 5,
                  y:ev.targetTouches[0].clientY- this.stage_info.top - 0
                };
                this.canvasTxt.beginPath();
                this.canvasTxt.moveTo(this.startX, this.startY);
                this.canvasTxt.lineTo(obj.x, obj.y);
                this.canvasTxt.stroke();
                this.canvasTxt.closePath();
                this.points.push(obj);
                this.points.push({x:-1,y:-1});
              }
      },        
//重写        
   overwrite(){
              this.canvasTxt.clearRect(0, 0, this.$refs.canvasF.width, this.$refs.canvasF.height);
              this.points=[];
          }

      
  },
  mounted: function() {
    this.$nextTick(() => {
        this.$on('openDialog', function() {
            this.dialogProps.visible = true
            this.$nextTick(() => {
                
                this.canvas=this.$refs.canvasF;        
                // this.canvas.height = this.$refs.canvasF.offsetHeight - 60;        
                // this.canvas.width =this.$refs.canvasF.offsetWidth-10;        
                this.canvasTxt=this.canvas.getContext("2d");        
                this.stage_info = this.canvas.getBoundingClientRect();


              })
          })
    })
  },
  computed: {
   
  },
}
</script>

<style >

	
</style>